<template>
    <div class="integral_detail">
        <x-header v-show="!isWeChar" class="myHeader">
            <div slot="default" class="common__header--title">{{pageTitle}}</div>
            <div @click="goBack" slot="overwrite-left" class="common__header--img">
                <img slot="icon" src="~assets/x3/ico/goback1.png" class="go-back">
            </div>
        </x-header>
        <div class="details">
            <div class="detail">
                <div class="title">类型</div>
                <div class="content">{{integral.curIntegralDeatil.changeType | filter_change_type}}</div>
            </div>
            <div class="detail">
                <div class="title" v-if="integral.curInOrOutType==1">获取时间</div>
                <div class="title" v-else-if="integral.curInOrOutType==2">扣减时间</div>
                <div class="title" v-else>时间</div>
                <div class="content">{{integral.curIntegralDeatil.changeTime}}</div>
            </div>
            <!-- <div class="detail">
                <div class="title">客户代码</div>
                <div class="content">{{integral.curIntegralDeatil.userCode}}</div>
            </div>
            <div class="detail">
                <div class="title">客户微信号</div>
                <div class="content">{{integral.curIntegralDeatil.openid}}</div>
            </div> -->
            <div class="detail">
                <div class="title">宝豆</div>
                <div class="content">{{integral.curIntegralDeatil.reChangeScore}} 个</div>
            </div>
            <div class="detail">
                <div class="title">状态</div>
                <div class="content">{{showState()}}</div>
            </div>
            <!-- <div class="detail" v-if="integral.curIntegralDeatil.changeType != '3'">
                <div class="title">应收</div>
                <div class="content">{{integral.curIntegralDeatil.reChangeScore}} 个</div>
            </div>
            <div class="detail" v-if="integral.curIntegralDeatil.changeType != '3'">
                <div class="title">实收</div>
                <div class="content">{{integral.curIntegralDeatil.acChangeScore}} 个</div>
            </div> -->
            <!-- 1=活动，显示 -->
            <div class="detail" v-if="integral.curIntegralDeatil.changeType =='1'">
                <div class="title">活动名称</div>
                <div class="content">{{integral.curIntegralDeatil.reason}}</div>
            </div>
            <div class="detail" v-if="user.userDto.userType == '3' || user.userDto.userType == '4' || user.userDto.userType == '5'">
                <div class="title">变更单号</div>
                <div class="content">{{integral.curIntegralDeatil.reasonNo}}</div>
            </div>
            <div class="detail">
                <div class="title">生效时间</div>
                <div class="content">{{integral.curIntegralDeatil.effictiveDate}}</div>
            </div>
            <div class="detail">
                <div class="title">失效时间</div>
                <div class="content">{{integral.curIntegralDeatil.invalidDate}}</div>
            </div>
            <div class="detail">
                <div class="title">备注</div>
                <div class="content">{{integral.curIntegralDeatil.remark}}</div>
            </div>
        </div>
    </div>
</template>

<script>
import Config from "src/common/config/integralConfig";
import DateUtil from "src/common/util/dateUtil";
import { RouteUrl, Mutations } from "src/common/const";
import { XHeader, Group, Cell, } from "vux";
import { mapState } from "vuex";
export default {
    components: { XHeader, Group, Cell, },
    computed: mapState(["user", "isWeChar", "integral"]),
    data() {
        return {
            pageTitle: "宝豆详情",
        }
    },
    filters: {
        //过滤单号
        filter_no(val) {
            val = val + "";
            if (val.length > 16) {
                return val.substring(0, 16) + "…";
            }
            return val;
        },

        //变更类型名称
        filter_change_type(val) {
            if (typeof (val) != 'undefined' && val != null && val.length > 0) {
                //积分变更类型
                val = Config.getIntegralChangeType(val);
            } else {
                val = "未知";
            }
            return val;
        },
        //格式化时间戳
        filter_time(val) {
            if (typeof (val) != "undefined" && val != null) {
                return DateUtil.getFullStrDateByTs2(val);
            }
            return val;
        },
    },
    methods: {
        goBack() {
            this.$common.goBackUrl(this, RouteUrl.INTEGRAL_IN_OR_OUT_LIST);//返回
        },
        showState() {
            //待生效时间
            let datetime = this.integral.curIntegralDeatil.effictiveDate;
            //待生效时间戳
            let effictiveTime = DateUtil.getDateByStrYmdOrYmdhms(datetime).getTime();
            //今天凌晨时间戳
            let todayTime = DateUtil.getDateByStrYmdOrYmdhms(DateUtil.getNowDateStr_Ymd()).getTime();
            //生效时间大于今天
            if (effictiveTime > todayTime) {
                return "待生效";
            }
            return "已生效";
        }
    },
    created() {
        if (!this.user.isLogin) {
            this.$common.goUrl(this, RouteUrl.LOGIN);//需要登录
            return;
        }
    },
    beforeRouteEnter(to, from, next) {
        sessionStorage["MGT_ID_NUMBER_FORM_URL"] = from.path;//刷新时的地址
        next();
    },
    beforeMount() {
        if (sessionStorage["MGT_ID_NUMBER_FORM_URL"] == "/") {//刷新时返回列表页
            this.$common.goUrl(this, RouteUrl.INTEGRAL_IN_OR_OUT_LIST);
            return;
        }
    },
    mounted() {
        document.title = this.pageTitle;
        this.$init.subPageInit(this);
    }
}
</script>

<style lang="scss" scoped>
.integral_detail {
  width: 100%;
  height: 100vh;
  .myHeader {
    z-index: 2;
  }
  .details {
    background-color: white;
    margin-top: 10px;
    padding: 0px 10px;
    color: dimgray;

    .detail {
      width: 100%;
      min-height: 40px;
      line-height: 40px;
      border-bottom: 1px solid #eee;
      word-break: break-all;
      overflow: auto;

      .title {
        width: 35%;
        float: left;
        color: black;
      }

      .content {
        width: 65%;
        float: right;
        text-align: right;
      }
    }
  }
}
</style>

